<!-- 两药总量 -->
<template>
    <div id="twoDiseases"></div>
</template>
<script>
import * as echarts from "echarts";
import { getTwoDiseasesData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            let data1 = [];
            let data2 = [];
            let data = [{ VALUE1: Mock.Random.integer(5500, 15000), VALUE2: Mock.Random.integer(5500, 15000) },
            { VALUE1: Mock.Random.integer(4200, 12000), VALUE2: Mock.Random.integer(5500, 15000) },
            { VALUE1: Mock.Random.integer(4100, 13000), VALUE2: Mock.Random.integer(4100, 13000) },
            { VALUE1: Mock.Random.integer(4000, 10000), VALUE2: Mock.Random.integer(4000, 10000) },
            { VALUE1: Mock.Random.integer(1000, 5000), VALUE2: Mock.Random.integer(1000, 5000) }]
            data.forEach((item) => {
                data1.push(parseInt(item.VALUE1));
                data2.push(parseInt(item.VALUE2));
            });
            let twoDiseases = echarts.init(
                document.getElementById("twoDiseases")
            );
            var option = {
                tooltip: {
                    //提示框组件
                    trigger: "axis",
                    formatter: "{b}<br />{a0}: {c0}<br />{a1}: {c1}",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                    textStyle: {
                        color: "#fff",
                        fontStyle: "normal",
                        fontFamily: "微软雅黑",
                        fontSize: 12,
                    },
                },
                grid: {
                    left: "1%",
                    right: "4%",
                    bottom: "6%",
                    top: 45,
                    padding: "0 0 10 0",
                    containLabel: true,
                },
                legend: {
                    //图例组件，颜色和名字
                    right: 10,
                    top: 0,
                    itemGap: 16,
                    itemWidth: 18,
                    itemHeight: 10,
                    data: [
                        {
                            name: "高血压",
                            //icon:'image://../wwwroot/js/url2.png', //路径
                        },
                        {
                            name: "糖尿病",
                        },
                    ],
                    textStyle: {
                        color: "#a8aab0",
                        fontSize: 16,
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true, //坐标轴两边留白
                        data: ["人民医院", "二院", "中医院", "乡镇卫生院"],
                        axisLabel: {
                            //坐标轴刻度标签的相关设置。
                            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
                            margin: 15,
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                        },
                        axisTick: {
                            //坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine: {
                            //坐标轴轴线相关设置
                            lineStyle: {
                                color: "#fff",
                                opacity: 0.2,
                            },
                        },
                        splitLine: {
                            //坐标轴在 grid 区域中的分隔线。
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        splitNumber: 5,
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ["#fff"],
                                opacity: 0.04,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "高血压",
                        type: "bar",
                        data: data1,
                        barWidth: 12,
                        barGap: 0.5, //柱间距离
                        label: {
                            //图形上的文本标签
                            normal: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            //图形样式
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 1,
                                            color: "rgba(127, 128, 225, 0.7)",
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(72, 73, 181, 0.7)",
                                        },
                                        {
                                            offset: 0.31,
                                            color: "rgba(0, 208, 208, 0.7)",
                                        },
                                        {
                                            offset: 0.15,
                                            color: "rgba(0, 208, 208, 0.7)",
                                        },
                                        {
                                            offset: 0,
                                            color: "rgba(104, 253, 255, 0.7)",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                    },
                    {
                        name: "糖尿病",
                        type: "bar",
                        data: data2,
                        barWidth: 12,
                        barGap: 0.8, //柱间距离
                        label: {
                            //图形上的文本标签
                            normal: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 14,
                                },
                            },
                        },
                        itemStyle: {
                            //图形样式
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 1,
                                            color: "rgba(127, 128, 225, 0.7)",
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(72, 73, 181, 0.7)",
                                        },
                                        {
                                            offset: 0.25,
                                            color: "rgba(226, 99, 74, 0.7)",
                                        },
                                        {
                                            offset: 0,
                                            color: "rgba(253, 200, 106, 0.7)",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                    },
                ],
            };
            twoDiseases.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#twoDiseases {
    width: 100%;
    height: 100%;
}
</style>